<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
</head>

<body>
  <div>
    <h1>用户管理界面</h1>
    <button id="exit">退出登录</button>
    <div>
      用户名：<input type="text" id="username">
    </div>
    <div>
      密码：<input type="password" id="password">
    </div>
    <div>
      年龄：<input type="number" id="age">
    </div>
    <div>
      头像：<input type="file" id="avatar">
    </div>
    <div>
      <button id="register">注册</button>
      <button id="update">更新</button>
      <button id="del">删除</button>
    </div>
    <hr />
    <table border="1">
      <thead>
        <tr>
          <td>ID</td>
          <td>用户名</td>
          <td>年龄</td>
          <td>头像</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios.interceptors.request.use(function (config) {
      const token = localStorage.getItem('token');
      config.headers.authorization = 'Bearer ' + token;
      return config;
    }, function (error) {
      return Promise.reject(error);
    });
    axios.interceptors.response.use(function (response) {
      const token = response.headers.authorization;
      // console.log(token);
      token && localStorage.setItem('token', token);
      return response;
    }, function (error) {
      console.log(error.response.status)
      if (error.response.status === 401) {
        localStorage.removeItem('token');
        location.href = '/login'
      }
      return Promise.reject(error);
    });
  </script>
  <script>
    var register = document.querySelector('#register');
    var exit = document.querySelector('#exit');
    var update = document.querySelector('#update');
    var avatar = document.querySelector('#avatar');
    var del = document.querySelector('#del');
    var username = document.querySelector('#username');
    var password = document.querySelector('#password');
    var age = document.querySelector('#age');
    var tbody = document.querySelector('tbody');

    register.onclick = () => {
      const formdata = new FormData();
      formdata.append('username', username.value)
      formdata.append('password', password.value)
      formdata.append('age', age.value)
      formdata.append('avatar', avatar.files[0])
      // console.log(formdata)
      // for (let [a, b] of formdata.entries()) {   // 获取formdata内储存的数据
      //   console.log(a, b, '--------------');
      // }

      axios.post('/api/person/add', formdata, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
        getList();
      })
    }

    exit.onclick = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'
    }

    update.onclick = () => {
      axios.put('/api/person/update', {
        _id: '6347ad90e77026ae14290a54',
        username: '手动更新',
        password: '手动更新',
        age: 0
      }).then(res => {
        console.log(res)
      })
    }

    del.onclick = () => {
      // delete请求 不允许以body形式携带数据
      axios.delete('/api/person/del/6347ad90e77026ae14290a54').then(res => {
        console.log(res)
      })
    }

    getList();
    // 查询全部
    function getList() {
      axios.get('/api/person/list?page=1&limit=10').then(res => {
        tbody.innerHTML = res.data.data.map(item => {
          return `
              <tr>
                <td>${item._id}</td>
                <td>${item.username}</td>
                <td>${item.age}</td>
                <td><img style="width:50px" src=${item.avatar} /></td>
              </tr>
            `
        }).join("")
      })
    }
        // 查询单个
        // fetch('/api/person/list/6344d99ffa5a69d72150ee8c').then(res => res.json()).then(res => {
        //   console.log(res)
        // })
  </script>
</body>

</html>